<template>
  <div>
    <!-- 使用辅助函数...mapstate -->
    {{ this.$store.state.name }}

    <!-- 不适用辅助函数...mapstate -->
    {{ name }}

    <!-- 没有使用辅助函数...getters -->
    {{ filterArr }}

    <!-- 使用...getters -->
    {{ this.$store.getters.filterArr }}

    {{ count }}

    <button @click="btnAdd">加加</button>
    <button @click="btnjj">减减</button>
  </div>
</template>
  
  <script>
// 使用vuex必须使用vuex
// 前面全是加map的都是辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  // mapState必须在coputed里面使用
  // mapGetters必须在coputed里面使用
  computed: {
    ...mapState(["name", "count"]),
    ...mapGetters(["filterArr"]),
    // 用了辅助函数就可以直接使用数据name
  },

  created() {
    // 第一种使用没有使用辅助函数getters
    console.log("====================================");
    console.log(this.$store.getters.filterArr);
    //打印出one two两个数据包含o
    console.log("====================================");
  },

  methods: {
    //第一种方法没有使用...mapMutations辅助函数
    // 加加count
    btnAdd() {
      this.$store.commit("addCount", 10);
      // 也就是你想使用mutaions，就需要使用commit来触发mutaions的操作
      // 第一个参数是mutations定义的方法 第二个参数是传的参数没加10
    },
    btnjj() {
      this.$store.commit("jjCount");
      // 也就是你想使用mutaions，就需要使用commit来触发mutaions的操作
      // 第一个参数是mutations定义的方法 第二个参数没传默认是1
    },

    // 第二种方法使用...mutations辅助函数
    ...mapMutations(["addCounts", "jjCounts"]),
    btnAdd() {
      this.addCounts(10);
      // this直接指向addCounts在vuex中mutations直接使用方法 括号里面是传的参数10
    },
    btnjj() {
      this.jjCounts();
      // this直接指向addCounts在vuex中mutations直接使用方法 括号里面是传的参数不传默认是一
    },

    // 第一种方法没有使用...mapactions辅助函数
    btnAdd() {
      this.$store.dispatch("asyncAdd", 100);
      // 也就是你想使用actions就需要使用dispatch来触发actions的操作
    },
    btnjj() {
      this.$store.dispatch("asyncjj");
      // 也就是你想使用actions就需要使用dispatch来触发actions的操作
    },

    // 第二种方法使用...mapactions辅助函数
    ...mapActions(["asyncAdd", "asyncjj"]),
    btnAdd() {
      this.asyncAdd(100);
    },
    btnjj() {
      this.asyncjj();
    },
  },
};
</script>
  
  <style>
</style>